function waterRipple(RJB, transparency, Termination) {
  // 初始化 
  var RJBs = Array(0, 0, 0);
  var transparencys = 0.05;
  var Terminations = true;
  
  if(RJB != undefined) { RJBs = RJB;}
  if(transparency != undefined) { transparencys = transparency; }
  if(Termination != undefined) { Terminations = Termination; }
  // console.log(RJBs)
/* ----------------------------------------------------------------------- */ 
    var divBox = document.createElement("div");    
    divBox.id = "dropsOfWater";
    for(let i = 0; i < 3; i++) {
      let divs = document.createElement("div");
      divs.className = "wave";
      divBox.appendChild(divs);      
    }   
    document.body.appendChild(divBox);
/* ----------------------------------------------------------------------- */


/* ----------------------------------------------------------------------- */
    var wave = document.getElementsByClassName("wave");
    var dropsOfWater = document.getElementById("dropsOfWater");
    
    if(Terminations === true) {
      document.body.onmousedown = function() {              
        for(let i = 0; i < wave.length; i++) {      
          wave[i].className = "wave";
          wave[i].style.backgroundColor = `rgba(${RJBs[0]}, ${RJBs[1]}, ${RJBs[2]}, ${transparencys})`;       
        }
      }
      document.body.onmouseup = function(event) {    
        dropsOfWater.style.top = (event.clientY-100) + "px";        
        dropsOfWater.style.left = (event.clientX-100) + "px"; 
        
        for(let i = 0; i < wave.length; i++) {
          wave[i].className = "wave wave"+i;                
        }     
      }
    }else if(Terminations === false) {      
      document.body.onmousedown = null;
      document.body.onmouseup = null;
    }      
/* ----------------------------------------------------------------------- */
}

export {
  waterRipple,
}